<template>
    <div class="default-main">
        <div class="content">
            <div class="select-user">
                <el-row :gutter="20">
                    <el-col class="mb-20" :xs="24" :sm="12" :md="12" :lg="6">
                        <BaInput
                            type="remoteSelect"
                            v-model="state.user_id" 
                            size="large"
                            :attr="{
                                pk: 'id',
                                field: 'username',
                                'remote-url': 'admin/user.user/index',
                                placeholder: '请选择下单客户',
                                params: { isTree: false, treeAll: false }
                            }"
                        />
                    </el-col>
                    <el-col class="mb-20" :xs="24" :sm="12" :md="12" :lg="6">
                        <BaInput
                            type="remoteSelect"
                            v-model="state.place_order_type"
                            size="large"
                            :attr="{
                                pk: 'id',
                                field: 'name',
                                remoteUrl: 'admin/place_order.Type/index',
                                placeholder: '请选择下单类型',
                                params: { isTree: true, treeAll: true }
                            }"
                        />
                    </el-col>
                    
                        
                </el-row>
                <el-button type="primary" @click="toPlaceOrder()">去下单</el-button>
            </div>
            
        </div>
        
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

import BaInput from '/@/components/baInput/index.vue'
import { ElMessage } from 'element-plus'
import router from '/@/router'

defineOptions({
    name: 'place_order/index',
})


const state = reactive({
    user_id: null,
    place_order_type: null
})

const toPlaceOrder = () => {
    if(state.user_id == null){
        ElMessage({ message: '请选择下单客户', type: 'error' });
        return;
    }
    if(state.place_order_type == null){
        ElMessage({ message: '请选择下单类型', type: 'error' });
        return;
    }
    router.push({ path: '/admin/place_order/place_order', query: { user_id: state.user_id, place_order_type: state.place_order_type } })
}



</script>

<style scoped lang="scss">
.content {
    background-color: var(--ba-bg-color-overlay);
    border-radius: var(--el-border-radius-base);
    border-top: 3px solid #409eff;
    .select-user {
        padding: 30px;
    }
}
.el-card :deep(.el-timeline-item__icon) {
    font-size: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
@media screen and (max-width: 1200px) {
    .lg-mb-20 {
        margin-bottom: 20px;
    }
}
</style>
